import React, { useState } from 'react'
import { Button, Popover } from 'antd'
import './index.css';
import { useNavigate } from 'react-router-dom';

const Content = ({userName}) => {
  const navigate = useNavigate();
  const logout = () => {
    localStorage.setItem('token', '');
    navigate('/login', {
      replace: true
    })
  }
  return (
    <>
      <div>
        <Button type='link'>当前登录用户: { userName }</Button>
      </div>
      <div>
        <Button color="danger" variant='link' onClick={logout}>退出登录</Button>
      </div>
    </>
  )
}


const PopoverContent = ({ loginUser }) => {

  return (
    <div className='pop-wrap'>
      <Popover placement="bottom" content={<Content userName={loginUser.username} />}>
        <Button type='link'>{loginUser.username}</Button>
      </Popover>
    </div>
  )
}

export default PopoverContent